<template>
  <el-card
    :body-style="{
      padding: '0 0 0 0',
      backgroundColor: '#fff',
      position: 'relative',
    }"
  >
    <div class="list">
      <div
        class="item"
        v-for="item in data.records"
        :key="item.id"
        @click="goTo(item, gotoDetail)"
      >
        <img class="icon" :src="item.icon" alt="">
        <div class="txt">
          <p class="title" v-html="changeKey(item.name)"></p>
          <div class="content" v-html="changeKey(item.content)"></div>
          <p class="msg">
            <span class="link">{{ item.createTime }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        :page-size="data.pageSize"
        v-model:currentPage="data.curPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <div class="flex layout">
        第<span>{{
          data.curPage + "/" + Math.ceil(data.total / data.pageSize)
        }}</span
        >条到第
        <el-input
          size="mini"
          class="el-pagination__editor is-in-pagination"
          :min="1"
          :max="99"
          :model-value="innerValue"
          type="number"
          @update:model-value="handleInput"
          @change="handleChange"
        />
        页
      </div>
    </div>
  </el-card>
</template>
  
  <script setup>
import WebGameDetailCard from "./WebGameDetailCard.vue";
import { ref, computed, defineEmits } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = ref(useRoute());
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits({
  pageChange: null,
  typeChange: null,
});
const activeName = ref("pop");

const handleClick = (tab, event) => {
  emit("typeChange", activeName.value);
};

const userInput = ref(null);
const handleInput = (val) => {
  userInput.value = +val;
};

// const currentPage = ref(1);
const handleCurrentChange = (pageNumber) => {
  emit("pageChange", pageNumber);
};

const handleChange = (pageNumber) => {
  userInput.value = undefined;
  emit("pageChange", pageNumber);
  // currentPage.value = +val;
};

const innerValue = computed(() => userInput.value);
const gotoThird = (item) => {
  axios.get(
    "/api/download/soft/detail/" + window.btoa(item.thirdUrl||item.url) + ".html"
  );
};
const changeKey = (str) => {
  let key = route.value.params.name;
  return str.replace(key, "<span class='red'>" + key + "</span>");
};
const gotoInfoDetail = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
};
const goTo = (item, gotoDetail) => {
  if ([1,2,3,5,6].includes(item.state)) {
    gotoDetail(
      { id: item.id },
      router,
      axios
    );
  } else if ([4].includes(item.state)) {
    gotoInfoDetail(item.id);
  } else {
    window.open(item.thirdUrl||item.url);
  }
};
</script>
  
  <style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.pagination {
  padding-bottom: 20px;
  .layout {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #545759;
    line-height: 14px;
    margin-right: 20px;
  }
}
.list {
  padding: 20px 20px 0px 20px;
  .item {
    margin-bottom: 0px;
    padding: 20px 0;
    border-bottom: 1px solid #f5f7f8;
    cursor: pointer;
    &:hover{
      img{
        opacity: 0.6;
      }
    }
    .title {
      font-size: 20px;
      line-height: 20px;
      color: #1d2127;
      margin-bottom: 12px;
      /deep/ .red {
        color: @theme-color;
      }
    }
    .content {
      margin: 0;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      // /deep/p{
      //   line-height: 0;
      // }
      /deep/ .red {
        color: @theme-color;
      }
    }
    .msg {
      margin-top: 5px;
      font-size: 14px;
      height: 14px;
      line-height: 14px;
      color: #3d7eff;
      .link {
        color: #545759;
      }
    }
    &:hover {
      .title {
        color: @link-color;
      }
    }
  }
}
.tabs-title {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1d2127;
  line-height: 20px;
}

.el-tabs {
  ::v-deep(.el-tabs__nav-wrap) {
    padding-left: 200px;
  }

  ::v-deep(.el-tabs__item) {
    height: 32px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #93999e;
    line-height: 1;
  }

  ::v-deep(.is-active) {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #47b752;
    line-height: 1;
  }

  ::v-deep(.el-tabs__active-bar) {
    background-color: #47b752;
  }

  ::v-deep(.el-tabs__nav-scroll) {
    padding: 16px 20px 0 20px;
  }
}

::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #47b752;
}

::v-deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #47b752;
}
::v-deep(.el-input__inner:focus) {
  border-color: #47b752;
}
.icon {
  margin-right: 16px;
  width: 180px;
  height: 120px;
  border-radius: 8px;
}
.txt {
  display: inline-block;
  width: calc(100% - 196px);
}
</style>